<template>
	<view class="vipdetail">
		<Hearder :name="'空间会员详情'"></Hearder>
		<view class="topBox">
			<view class="basebox clearfix">
				<image :src="member.avatarUrl"></image>
				<view>
					<view>{{member.nickName}}</view>
					<view>{{member.phone}}</view>
				</view>
			</view>
			<view class="disable" v-if="member.disabled==10" @click="statusbtn(20)">禁用</view>
			<view class="disable" v-if="member.disabled==20" @click="statusbtn(10)">开启</view>
		</view>
		<view class="subscribe">
			<view class="sub-title">预约记录</view>
			<view class="sub-list">
				<view class="sub-every clearfix" v-for="(item,index) in list" :key="index">
					<image :src="item.goods_image"></image>
					<view>
						<view class="title">{{item.goods_name}}</view>
						<view class="subtime">预约时间:{{item.create_time}}</view>
						<view class="subprice">商品价格：<text>￥{{item.goods_price}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				member_id:'',
				member:{},
				list:[]
			}
		},
		onLoad(options) {
			this.member_id = options.member_id
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/space/getMemberDetail',{member_id:this.member_id}).then(res => {
					if(res.data.code==1){
						this.member = res.data.data.member
						this.list = res.data.data.list
					}
				})
			},
			statusbtn(disabled){
				this.request('/search/toSwitch',{disabled:disabled,member_id:this.member.member_id}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						this.getinit()	
					}else{
						this.$tip(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.vipdetail{
		.topBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			.basebox{
				image{
					float: left;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				>view{
					float: left;
					margin-left: 18rpx;
					view{
						font-size: 28rpx;
						&:last-of-type{
							font-size: 24rpx;
							color: #999;
							margin-top: 12rpx;
						}
					}
				}
			}
			.disable{
				width: 160rpx;
				height: 66rpx;
				background: $uni-item-color;
				font-size: 28rpx;
				text-align: center;
				line-height: 66rpx;
				border-radius: 66rpx;
				color: #fff;
			}
		}
		.subscribe{
			.sub-title{
				height: 30rpx;
				line-height: 30rpx;
				border-left: 4rpx solid $uni-item-color;
				padding-left: 20rpx;
				margin: 30rpx;
			}
			.sub-list{
				margin: 0 4%;
				.sub-every{
					margin-bottom: 49rpx;
					image{
						float: left;
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					>view{
						float: left;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 220rpx);
						height: 200rpx;
						margin-left: 20rpx;
						view{
							font-size: 28rpx;
						}
						.title{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.subtime{
							color: #999;
						}
						.subprice{
							font-size: 26rpx;
							text{
								font-size: 26rpx;
								color: $uni-text-color;
							}
						}
					}
				}
			}
		}
	}
</style>